<template>
  <div class="discord-other">
    <h2 class="text-3xl text-gray-1000 font-semibold text-center">
      <span class="text-gray-1000 font-semibold text-34 break-words w-full">{{$t('discord_otherDiscords')}}</span>
    </h2>
    <div class="mt-7 grid gap-y-4 gap-3 sm:grid-cols-2 lg:grid-cols-4">
      <common-link path="/discord/:handle"
        target="_blank"
        :params="{'handle': item.handle}"
        v-for="(item, key) in next_and_last_name"
        :key="`${item.handle}-${key}`"
        class="text-lg text-gray-1000 border-gray-2000 bg-white border rounded-md text-center px-5 py-4 truncate  hover:text-purple-1300 hover:border-purple-1300 hover:underline go-comparisons-link">
        {{ item.show_name }}
      </common-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DiscordOther',
  props: {
    next_and_last_name: {
      type: Array,
      default: () => [],
    },
    discordName: {
      type: String,
      default: '',
    },
  },
  watch: {
    discord: {
      handler: function (val) {
        if (val) {
          this.totalMembersList = this.discord.tool_discord_data
        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      totalMembersList: [],
    }
  },
}
</script>
<style lang='scss' scoped>
</style>